<template>
  <div style=" height:700px;padding-bottom: 100px;background: #f6f7f9;">
    <!-- 顶部导航 -->
    <van-sticky>
      <van-nav-bar title="我的订单" left-arrow @click-left="$router.go(-1)">
      </van-nav-bar>
      <van-tabs v-model="active" @change="flashList">
        <van-tab title="全部"></van-tab>
        <van-tab title="待付款"></van-tab>
        <van-tab title="待收货"></van-tab>
        <van-tab title="待评价"></van-tab>
      </van-tabs>
    </van-sticky>
    <div style="text-align: left;">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            :finished="finished"
            finished-text="没有更多了"
        >
          <van-swipe-cell v-for="item in orderList">
            <van-cell :value="item.status" @click="getOrderDetails(item.id)" style="margin-top: 10px">
              <template #title>
              <span class="custom-title"
                    style="font-weight: bold; font-size: 17px; color: deepskyblue">{{ item.company }}</span>
              </template>
              <template #label>
                <div style="font-weight: bold; color: #333333; width: 280px;">
                  <span>配送地址：{{ item.address }}</span>
                </div>
                <div style="font-weight: bold; color: #333333;width: 280px;">
                  <span>创建时间：{{ item.createTime }}</span>
                </div>
              </template>
            </van-cell>
            <template #right>
              <van-button v-if="item.status=='订单完成' || item.status=='待支付'" @click="deleteOrder(item.id)" square
                          type="danger" text="删除" style="height: 100%"/>
            </template>
          </van-swipe-cell>
        </van-list>
      </van-pull-refresh>
    </div>

  </div>
</template>

<script>
export default {

  data() {
    return {
      orderList: [
        {
          id: '',
          company: '中通快递',
          address: '江西省宜春市袁州区宜春学院',
          status: '等待接单',
          isEvaluate:'',
          createTime: '2023-01-11T11:29:49',
        },
      ],
      active:0,
      isLoading: false,
      finished: false,
      refreshing: false,
    }
  },

  mounted() {
    // 加载当前用户的订单列表
    this.loadOrderList()
  },

  methods: {
    //加载订单列表
    loadOrderList(){
      let active = parseInt(localStorage.getItem("active"));
      console.log(active);
      this.active = active;
      if(this.active==0){
        this.loadAllOrderList();
      }else if(this.active==1){
        this.loadWaitPayList();
      }else if(this.active==2){
        this.loadWaitGoods();
      }else if(this.active==3){
        this.loadWaitEvaluate();
      }else {
        this.loadAllOrderList();
      }
    },
    // 加载当前用户的所有订单列表
    loadAllOrderList() {
      let active=parseInt(localStorage.getItem("active"));
      console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:9080/orders/user';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log(response.data.data);
        let responseBody = response.data.data;
        for (let i = 0; i < responseBody.length; i++) {
          if (responseBody[i].status == 1) {
            if (responseBody[i].payTime == null) {
              responseBody[i].status = '待支付'
            } else {
              responseBody[i].status = '等待接单'
            }
          } else if (responseBody[i].status == 2) {
            responseBody[i].status = '派送中'
          } else if (responseBody[i].status == 3) {
            if(responseBody[i].isEvaluate==1){
              responseBody[i].status = '待评价'
            }else {
              responseBody[i].status = '订单完成'
            }
          } else if (responseBody[i].status == 4) {
            responseBody[i].status = '订单异常'
          }
        }
        this.orderList = responseBody;
      })
    },
    loadWaitPayList(){
      console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:9080/orders/pay-time';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log(response.data.data);
        let responseBody = response.data.data;
        for (let i = 0; i < responseBody.length; i++) {
          responseBody[i].status = '待支付';
        }
        this.orderList = responseBody;
      })
    },
    loadWaitGoods(){
      console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:9080/orders/transport';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log(response.data.data);
        let responseBody = response.data.data;
        for (let i = 0; i < responseBody.length; i++) {
          responseBody[i].status = '派送中';
        }
        this.orderList = responseBody;
      })
    },
    loadWaitEvaluate(){
      console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:9080/orders/open';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log(response.data.data);
        let responseBody = response.data.data;
        for (let i = 0; i < responseBody.length; i++) {
          responseBody[i].status = '待评价';
        }
        this.orderList = responseBody;
      })
    },
    flashList(name, title) {
      if (title == '全部') {
        this.loadAllOrderList();
      } else if (title == '待付款') {
        this.loadWaitPayList();
      } else if (title == '待收货') {
        this.loadWaitGoods();
      } else if (title == '待评价') {
        this.loadWaitEvaluate();
      }
    },
    getOrderDetails(id) {
      localStorage.setItem('id', id);
      this.$router.push("/order/details");
    },
    onRefresh() {
      setTimeout(() => {
        this.flashList();
        this.refreshing = false;
      }, 1000);
    },
    deleteOrder(id) {
      this.$dialog.confirm({
        title: '删除订单',
        message: '删除该订单后将无法恢复，如需恢复请联系管理员，是否继续？',
      })
          .then(() => {
            let url = 'http://localhost:9080/orders/' + id + '/delete-user';
            this.axios
                .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
                .post(url).then((response) => {
              let responseBody = response.data;
              console.log(responseBody);
              if (responseBody.state == 20000) {
                this.$toast.success('删除订单成功!');
                this.loadAllOrderList();
              } else {
                this.$toast.fail(responseBody.message);
              }
            });
          })
          .catch(() => {

          });
    }
  },
};
</script>

<style scoped>
/** 自定义分割线 */
.divider {
  height: 15px;
  background: #eee;
}

/** 订单列表项样式 */
.orderlist-item .title,
.orderlist-item .footer {
  margin: 10px 0px;
  color: #666;
}

.orderlist-item .product-item {
  margin-bottom: 3px;
}
</style>
